<template>
	<div class="root">
		<div class="c1">
			<div>
			    <el-input
				size="large"
			    style="width:100%"
			    v-model="pData.keyword"
			    placeholder="请输入需要搜索的关键词">
			    <template #append>
			      <el-button @click="search">搜整站</el-button>
			    </template>
			  </el-input>
			</div>
		    <div class="c3" v-for="(v,index) in pData.list" :key="index">
		        <a :href="v.url"  v-if="v.type == 'tool'" target="_blank">
		            <span class="c6">{{index+1}}、</span>
		            <span class="layui-badge layui-bg-green">软件</span> {{v.title}}
		        </a>
		        <a :href="config.baseUrl+'index/index/notes_content?id='+v.id"  target="_blank" v-if="v.type == 'note'">
		            <span class="c6">{{index+1}}、</span>
		            <span class="layui-badge layui-bg-orange">笔记</span> {{v.title}} 
		        </a>
		        <a :href="config.baseUrl+'index/shop/goods_detail?id='+v.id"  target="_blank"  v-if="v.type == 'goods'">
		            <span class="c6">{{index+1}}、</span>
		            <span class="layui-badge">商品</span> {{v.title}}
		        </a>
		        <a :href="config.baseUrl+'index/index/news_content?id='+v.id"  target="_blank"  v-if="v.type == 'news'">
		            <span class="c6">{{index+1}}、</span>
		            <span class="layui-badge layui-bg-cyan">资讯、文章</span> {{v.title}}
		        </a>
		        <a v-if="v.type == 'member'">
		            <span class="c6">{{index+1}}、</span>
		            <span class="layui-badge layui-bg-cyan">会员</span> {{v.title}}
		        </a>
		        <a  v-if="v.type == 'money'">
		            <span class="c6">{{index+1}}、</span>
		            <span class="layui-badge layui-bg-cyan">账单</span> {{v.title}}
		        </a>
		    </div>
		    <div class="c4" v-if="pData.showEmpty">
		        <div class="c5"><i class="iconfont">&#xe708;</i></div>
		        没有找到<span> {{pData.keyword}} </span>相关数据
		    </div>
		</div>
	</div>
</template>

<script setup>
	import { Search } from '@element-plus/icons-vue'
	import publicJS from "@/hook/public.js";
	const { api,config,ElMessage } = publicJS();
	
	const pData = reactive({
		showEmpty:false,
	    keyword:'',
	    list:[]
	})
	
	const search = ()=>{
	    if(pData.keyword){
	        api.post('a/index/search',{keyword:pData.keyword}).then(r=>{
	            console.log(r)
	            pData.list = r.data;
				if(pData.list.length == 0)pData.showEmpty = true;
	        })
	    }else{
			ElMessage.error('请输入关键词')
		}
	}
</script>

<style scoped lang="scss">
	.root{
		padding: 20px;
		.c1{max-width: 640px;margin: 0 auto;}
		.c3{line-height: 32px;font-size: 15px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
		.c3 .layui-badge{margin-right: 10px;}
		.c4{text-align: center;padding: 50px 0;font-size: 16px;color: #888;}
		.c4 .iconfont{font-size: 88px;color: #888;}
		.c4 span{color: #006A90;}
		.c5{margin-bottom: 30px;}
		.c6{display: inline-block;width: 30px;text-align: center;}
	}
	
	html.dark {
		.root{
			
		}
	}
	
	@media screen and (max-width:960px) {
		.root{
			
		}
	}
</style>